<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>缓慢移动到画布中心</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="../build/dagre.js"></script>
    <script>
      const data = {
        edges: [
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20233',
            source: 'msgconsole',
            target: 'osp',
          },
          {
            callPerf: {
              avgElapse: 3.2,
              calls: 6,
              status: 'success',
            },
            id: 'edge-20234',
            source: 'dst-web',
            target: 'DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20235',
            source: 'USER',
            target: 'dsrconsole',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20236',
            source: 'USER',
            target: 'osp',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20237',
            source: 'USER',
            target: 'dbpconsole',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20238',
            source: 'USER',
            target: 'msgconsole',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20239',
            source: 'USER',
            target: 'drmdata',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20240',
            source: 'drmdata',
            target: 'dsrconsole',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20241',
            source: 'drmdata',
            target: '10.252.216.177:12200',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20242',
            source: 'drmdata',
            target: '10.80.59.63:12200',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20243',
            source: 'drmdata',
            target: '10.80.59.68:12200',
          },
          {
            callPerf: {
              avgElapse: 3.1,
              calls: 28461,
              status: 'success',
            },
            id: 'edge-20244',
            source: 'scheduler',
            target: 'ZDAL_scheduler_ds',
          },
          {
            callPerf: {
              avgElapse: 2.1,
              calls: 300,
              status: 'success',
            },
            id: 'edge-20245',
            source: 'scheduler',
            target: 'MQ',
          },
          {
            callPerf: {
              avgElapse: 3.5,
              calls: 4853,
              status: 'success',
            },
            id: 'edge-20246',
            source: 'dbpconsole',
            target: 'ZDAL_sharedataMysqlDataSource',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20247',
            source: 'dbpconsole',
            target: 'osp',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20248',
            source: 'dsrconsole',
            target: 'osp',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20249',
            source: 'dsrconsole',
            target: 'drmdata',
          },
          {
            callPerf: {
              avgElapse: 0.0,
              calls: 0,
              status: 'success',
            },
            id: 'edge-20250',
            source: 'dsrconsole',
            target: 'antscheduler',
          },
        ],
        nodes: [
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: 'msgconsole',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: 'msgconsole',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: 'osp',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: 'osp',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: 'dst-web',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: 'dst-web',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            application: {
              groupId: 'default',
              name: 'DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306',
            },
            id: 'DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306',
            status: 'success',
            type: 'db',
          },
          {
            application: {
              groupId: 'default',
              name: 'USER',
            },
            id: 'USER',
            status: 'success',
            type: 'user',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: 'dsrconsole',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: 'dsrconsole',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: 'dbpconsole',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: 'dbpconsole',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: 'drmdata',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: 'drmdata',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: '10.252.216.177:12200',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: '10.252.216.177:12200',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: '10.80.59.63:12200',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: '10.80.59.63:12200',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: '10.80.59.68:12200',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: '10.80.59.68:12200',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: 'scheduler',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: 'scheduler',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
          {
            application: {
              groupId: 'default',
              name: 'ZDAL_scheduler_ds',
            },
            id: 'ZDAL_scheduler_ds',
            status: 'success',
            type: 'db',
          },
          {
            application: {
              groupId: 'default',
              name: 'MQ',
            },
            id: 'MQ',
            status: 'success',
            type: 'mq',
          },
          {
            application: {
              groupId: 'default',
              name: 'ZDAL_sharedataMysqlDataSource',
            },
            id: 'ZDAL_sharedataMysqlDataSource',
            status: 'success',
            type: 'db',
          },
          {
            apdex: 0.0,
            apdexLevel: 'BAD',
            application: {
              groupId: 'default',
              name: 'antscheduler',
            },
            avgTime: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            errorRate: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            favorite: false,
            favoriteId: 0,
            id: 'antscheduler',
            status: 'success',
            totalCount: {
              empty: true,
              name: 'avgTime',
              total: 0.0,
              values: [],
            },
            type: 'app',
          },
        ],
      };
      // 自定义边
      G6.registerEdge(
        'my-edge',
        {
          // 复写控制点的逻辑
          curvePosition: 0.5, // 弯曲的默认位置
          curveOffset: -20,
          getControlPoints(cfg) {
            const controlPoints = []; // 指定controlPoints
            const level = -5; // 从 -10， 10
            const offset = level * -25; // 根据不同的level 计算不同的偏移
            const { startPoint, endPoint } = cfg;
            const innerPoint = G6.Util.getControlPoint(startPoint, endPoint, 0.5, offset);
            controlPoints.push(innerPoint);
            return controlPoints;
          },
        },
        'quadratic',
      );

      // 自定义节点，设置锚点
      G6.registerNode('customNode', {
        getAnchorPoints: () => {
          return [
            [0.5, 1],
            [0.5, 0],
          ]; // 底边中点
        },
        draw: (model, group) => {
          const widths = 150;
          const heights = 50;
          const aa = group.addShape('text', {
            attrs: {
              x: -widths / 4,
              y: -heights / 25,
              textBaseline: 'middle',
              fill: '#333',
              fontSize: 24,
              text: model.id.substr(0, 5),
            },
          });
          const texta = group.addShape('rect', {
            attrs: {
              x: -widths / 2,
              y: -heights / 2,
              width: widths,
              height: heights,
              stroke: model.isselect ? '#d9d9d9' : 'red',
              fill: model.isselect && 'red',
              radius: 25,
            },
          });
          return texta;
        },
      });

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 800,
        animate: true,
        layout: {
          type: 'dagre',
        },
        modes: {
          default: ['drag-node', 'drag-canvas', 'zoom-canvas'],
        },
        defaultNode: {
          size: [20, 20],
          shape: 'customNode',
          style: {
            fill: '#40a9ff',
            stroke: '#096dd9',
          },
        },
        defaultEdge: {
          shape: 'my-edge',
          style: {
            stroke: '#A3B1BF',
            style: {
              endArrow: true,
            },
          },
        },
      });

      graph.data(data);
      graph.render();

      graph.fitView();

      graph.on('node:click', evt => {
        const { item } = evt;
        const model = item.getModel();
        const point = graph.getPointByCanvas(500, 400);
        const dx = point.x - model.x;
        const dy = point.y - model.y;
        graph.getNodes().forEach(node => {
          const model = node.getModel();
          model.x += dx;
          model.y += dy;
        });

        graph.refresh();
      });
    </script>
  </body>
</html>
